<script setup>
import NavBarHeader from '@/components/NavBarHeader.vue'
import { useUserStore } from '@/stores/user'
import { TOKEN } from '@/utils/constant'
import axiosInstance from '@/utils/request'
const store = useUserStore()
//上传文件
const afterRead = async (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  axiosInstance
    .post('/oss/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        TOKEN: store.token
      }
    })
    .then((response) => {
      store.user.avatar = response.data.imageUrl
    })
    .catch((error) => {
      console.error(error)
    })
}
</script>

<template>
  <NavBarHeader>
    <template #title>个人信息</template>
  </NavBarHeader>
  <div class="my-page">
    <van-cell class="header" title="头像" is-link>
      <van-uploader
        :after-read="afterRead"
        name="multipartFile"
        multiple
        :max-count="1"
      >
        <img class="avatar" :src="store.user.avatar" alt="头像"
      /></van-uploader>
    </van-cell>

    <div class="menu">
      <van-cell
        to="profile"
        title="名字"
        icon="user-o"
        class="menu-item"
        is-link
        :value="store.user.nickname"
      />
      <van-cell
        title="性别"
        icon="setting-o"
        class="menu-item"
        is-link
        :value="store.user.sex === null ? '未知' : store.user.sex"
      />
    </div>
  </div>
</template>

<style scoped>
.my-page {
  background-color: #f0f0f0;
  height: 100vh;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.username {
  font-size: 1.1em;
  margin: 0;
}

.status {
  font-size: 0.8em;
  color: #888;
}

.menu {
  margin-top: 20px;
}

.menu-item {
  margin-bottom: 10px; /* 设置每个菜单项之间的间距 */
}
</style>
